<template>
  <div id="dataMap"></div>
</template>

<script>
import { selectareas } from '../../../api/dataCenter';
import { findDictByCode } from '../../../api/index';
import ZhuZhou from '../../../assets/json/zhuzhou.json';
export default {
  name: 'dataMap',
  data () {
    return {
      name: [],
      data: [],
      max: 0
    };
  },
  methods: {
    drawLine () {
      this.$echarts.registerMap('ZhuZhou', ZhuZhou);
      let myChart = this.$echarts.init(document.getElementById('dataMap'));
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c}'
        },
        visualMap: {
          min: 0,
          max: this.max,
          realtime: false,
          calculable: true,
          itemWidth: 5,
          textStyle: {
            color: '#fff'
          },
          inRange: {
            color: ['#0614A9', '#0076FF', '#00E1FF']
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'ZhuZhou', // 自定义扩展图表类型
            label: {
              position: 'insideRight',
              show: true,
              formatter: '{b}\n{c}',
              color: '#fff'
            },
            data: this.data
            //     data: [
            //         { name: '中西区', value: 20057.34 },
            //         { name: '湾仔', value: 15477.48 },
            //         { name: '东区', value: 31686.1 },
            //         { name: '南区', value: 6992.6 },
            //         { name: '油尖旺', value: 44045.49 },
            //         { name: '深水埗', value: 40689.64 },
            //         { name: '九龙城', value: 37659.78 },
            //         { name: '黄大仙', value: 45180.97 },
            //         { name: '观塘', value: 55204.26 },
            //         { name: '葵青', value: 21900.9 },
            //         { name: '荃湾', value: 4918.26 },
            //         { name: '屯门', value: 5881.84 },
            //         { name: '元朗', value: 4178.01 },
            //         { name: '北区', value: 2227.92 },
            //         { name: '大埔', value: 2180.98 },
            //         { name: '沙田', value: 9172.94 },
            //         { name: '西贡', value: 3368 },
            //         { name: '离岛', value: 806.98 }
            //     ],
            //     nameMap: {
            //         'Central and Western': '中西区',
            //         'Eastern': '东区',
            //         'Islands': '离岛',
            //         'Kowloon City': '九龙城',
            //         'Kwai Tsing': '葵青',
            //         'Kwun Tong': '观塘',
            //         North: '北区',
            //         'Sai Kung': '西贡',
            //         'Sha Tin': '沙田',
            //         'Sham Shui Po': '深水埗',
            //         Southern: '南区',
            //         'Tai Po': '大埔',
            //         'Tsuen Wan': '荃湾',
            //         'Tuen Mun': '屯门',
            //         'Wan Chai': '湾仔',
            //         'Wong Tai Sin': '黄大仙',
            //         'Yau Tsim Mong': '油尖旺',
            //         'Yuen Long': '元朗'
            //     }
          }
        ]
      });
    }
  },
  mounted () {
    let obj = {};
    findDictByCode('area')
      .then(data => {
        if (data.success) {
          console.log(data);
          data.data.forEach(item => {
            obj[item.name] = item.val;
          });
          console.log(obj);
          return selectareas();
        }
      })
      .then(data => {
        console.log(data);
        if (data.success) {
          this.data = Object.keys(obj).map(val => {
            let dataItem = { name: val };
            console.log(obj);
            if (obj[val] != 538) {
              console.log(val);
              dataItem.value = data.data.find(item => {
                return obj[val] === item.area;
              }) ? data.data.find(item => {
                return obj[val] === item.area;
              }).areaCount : 0;
              return dataItem;
            }
          });
          this.name = Object.keys(obj);
          console.log(this.data);

          this.max = this.data.sort((a, b) => b.value - a.value)[0].value;
          this.drawLine();
        }
      });
  }
};
</script>

<style scoped>
#dataMap {
    width: 400px;
    color: rgba(255, 255, 255, 1);
    height: 770px;
    margin: 0 auto;
}
</style>